<div class="layout layout-row layout-wrap" layout="row" layout-align="space-around center">
    <md-toolbar class="md-accent" layout="row" layout-align="start center">
        <div ng-include="'app/layout/BackButton.html'"></div> <!--ng-if="vm.ShowControls"-->
        <h3 class="marginleft20">Patient Demographics and Referral Details</h3>
    </md-toolbar>
</div>

<div class="layout-fill" layout="column" layout-align="space-around stretch" layout-padding>
    <div class="layout-wrap" layout="column" layout-gt-sm="row" layout-align="space-between stretch">
        <div>
            <md-card class="md-whiteframe-9dp patientCard noBorder" layout="column" flex ="100">
                <md-toolbar class="md-hue-2 md-primary">
                    <h3>Patient Details</h3>
                </md-toolbar>
                <md-card-content layout="column" layout-align="start stretch" layout-wrap>
                    <div layout-gt-xs="row" layout="column" layout-align="space-around stretch">
                        <div layout-gt-xs="row" layout="column" layout-align="start center" flex>
                            <p class="cardcontentsubheading">Name:</p>
                            <p class="cardcontentvalue">LastName, FirstName</p>
                        </div>
                    </div>

                    <div layout-gt-xs="row" layout="column" layout-align="space-around stretch">
                        <div layout-gt-xs="row" layout="column" layout-align="start center" flex>
                            <p class="cardcontentsubheading">DOB:</p>
                            <p class="cardcontentvalue">01/01/2000</p>
                        </div>
                        <div class="width20"></div>
                        <div layout-gt-xs="row" layout="column" layout-align="start center" flex>
                            <p class="cardcontentsubheading">Gender:</p>
                            <p class="cardcontentvalue">Female</p>
                        </div>
                    </div>

                    
                    <div layout-gt-xs="row" layout="column" layout-align="space-around stretch">
                        <div layout-gt-xs="row" layout="column" layout-align="start center" flex>
                            <p class="cardcontentsubheading">Address:</p>
                            <p class="cardcontentvalue">
                                123 MainStreet Street<br />
                                Apt#112 <br />
                                CityName StateName 76248-1234
                            </p>
                        </div>
                    </div>

                    <div layout-gt-xs="row" layout="column" layout-align="space-around stretch">
                        <div layout-gt-xs="row" layout="column" layout-align="start center" flex>
                            <p class="cardcontentsubheading">Email:</p>
                            <p class="cardcontentvalue">namelong@example.com</p>
                        </div>
                    </div>
                        <!--<div layout="column" layout-align="space-around stretch" flex="100">
                            <div layout-gt-xs="row" layout="column" layout-align="start center" flex="100">
                                <p class="cardcontentsubheading">First Name:</p>
                                <p class="cardcontentvalue">Murali</p>
                            </div>
                            <div layout-gt-xs="row" layout="column" layout-align="start center" flex="100">
                                <p class="cardcontentsubheading">LastName:</p>
                                <p class="cardcontentvalue">Venugopalan</p>
                            </div>
                            <div layout-gt-xs="row" layout="column" layout-align="start center" flex="100">
                                <p class="cardcontentsubheading">Date of Birth:</p>
                                <p class="cardcontentvalue">01/01/2000</p>
                            </div>
                            <div layout-gt-xs="row" layout="column" layout-align="start center" flex="100">
                                <p class="cardcontentsubheading">Gender:</p>
                                <p class="cardcontentvalue">Male</p>
                            </div>
                            <div layout-gt-xs="row" layout="column" layout-align="start center" flex="100">
                                <p class="cardcontentsubheading">Phone:</p>
                                <p class="cardcontentvalue">(132)456-7890</p>
                            </div>
                            <div layout-gt-xs="row" layout="column" layout-align="start center" flex="100">
                                <p class="cardcontentsubheading">Email:</p>
                                <p class="cardcontentvalue">testemailname@gmail.com</p>
                            </div>
                        </div>

                        <div layout="column" layout-align="space-around stretch" flex="100">
                            <div layout-gt-xs="row" layout="column" layout-align="start center" flex="100">
                                <p class="cardcontentsubheading">Address Line 1:</p>
                                <p class="cardcontentvalue">123 VeryLongStreetName Street</p>
                            </div>
                            <div layout-gt-xs="row" layout="column" layout-align="start center" flex="100">
                                <p class="cardcontentsubheading">Address Line 2:</p>
                                <p class="cardcontentvalue">Apt# 121</p>
                            </div>
                            <div layout-gt-xs="row" layout="column" layout-align="start center" flex="100">
                                <p class="cardcontentsubheading">City:</p>
                                <p class="cardcontentvalue">Thisisaliongcityname</p>
                            </div>
                            <div layout-gt-xs="row" layout="column" layout-align="start center" flex="100">
                                <p class="cardcontentsubheading">State:</p>
                                <p class="cardcontentvalue">TX</p>
                                <div style="width:20px;"></div>
                                <p class="cardcontentsubheading">Zip:</p>
                                <p class="cardcontentvalue">76248</p>
                            </div>
                        </div>-->
                    <md-divider></md-divider>
                    <div layout="column" layout-align="space-around stretch">
                        <div layout-gt-xs="row" layout="column" layout-align="start center" flex="100">
                            <p class="cardcontentsubheading">Primary Insurance:</p>
                            <p class="cardcontentvalue">Primary Insurance Provider</p>
                        </div>
                        <div layout-gt-xs="row" layout="column" layout-align="start center" flex="100">
                            <p class="cardcontentsubheading">Primary Insurance Plan #:</p>
                            <p class="cardcontentvalue">P12345667890</p>
                        </div>
                        <div layout-gt-xs="row" layout="column" layout-align="start center" flex="100">
                            <p class="cardcontentsubheading">Secondary Insurance:</p>
                            <p class="cardcontentvalue">Secondary Insurance Provider</p>
                        </div>
                        <div layout-gt-xs="row" layout="column" layout-align="start center" flex="100">
                            <p class="cardcontentsubheading">Secondary Insurance Plan #:</p>
                            <p class="cardcontentvalue">P12345667890</p>
                        </div>
                    </div>
                </md-card-content>

                <md-card-actions layout="row" layout-align="space-between center" layout-align-gt-sm="end center">
                    <md-button hide-gt-sm class="md-fab md-hue-2 md-hue-3" aria-label="Edit" style="margin:0px 10px 10px 10px" ng-click="vm.GoToTop()">
                        <md-tooltip>Go to top</md-tooltip>
                        <md-icon md-font-library="material-icons">&#xE5D8;</md-icon>
                    </md-button>

                    <div layout="row" layout-align="end center">
                        <md-button class="md-fab md-hue-2 md-primary" aria-label="Edit" style="margin:0px 10px 10px 0px" ng-click="vm.EditPatientDetails()">
                            <md-tooltip>Edit Section</md-tooltip>
                            <md-icon md-font-library="material-icons">&#xE254;</md-icon>
                        </md-button>
                    </div>
                </md-card-actions>
            </md-card>
        </div>

        <div layout="column" flex>
            <md-card class="md-whiteframe-9dp patientCard noBorder" flex="100">
                <md-toolbar class="md-hue-2 md-primary">
                    <h3>Diagnosis &amp; Attachments</h3>
                </md-toolbar>

                <md-card-content layout-gt-xs="row" layout="column" layout-align="start stretch">
                    <div layout="column" layout-align="space-around stretch">
                        <div layout="row" layout-align="start center">
                            <p class="cardcontentsubheading">Diagnosis Count:</p>
                            <p class="cardcontentvalue">10</p>
                        </div>
                        
                        <div layout="column" layout-align="start stretch">
                            <p class="cardcontentsubheading">Primary Diagnosis:</p>
                            <p class="cardcontentvalue">This is a very long Primary Diagnosis from the ICD10 List. Can show as ICD10Code - Diagnosis Description. ex. E83.40 - Disorders of magnesium metabolism unspecified.</p>
                        </div>
                        <div layout="column" layout-align="start stretch">
                            <p class="cardcontentsubheading">Other Diagnosis:</p>
                            <p class="cardcontentvalue">ICD10 List. E83.40, E83.41, E83.42, E83.42, E83.41, E83.42, E83.42</p>
                        </div>
                        <md-divider></md-divider>
                        <div layout="row" layout-align="start center">
                            <p class="cardcontentsubheading">Attachment Count:</p>
                            <p class="cardcontentvalue">2</p>
                        </div>
                        <div layout="row" layout-align="start center">
                            <p class="cardcontentsubheading">Attached Files:</p>
                            <p class="cardcontentvalue">Medical Record, X-Ray Copy</p>
                        </div>
                    </div>
                </md-card-content>

                <md-card-actions layout="row" layout-align="space-between center" layout-align-gt-sm="end center">
                    <md-button hide-gt-sm class="md-fab md-hue-2 md-hue-3" aria-label="Edit" style="margin:0px 10px 10px 10px" ng-click="vm.GoToTop()">
                        <md-tooltip>Go to top</md-tooltip>
                        <md-icon md-font-library="material-icons">&#xE5D8;</md-icon>
                    </md-button>

                    <div layout="row" layout-align="end center">
                        <md-button class="md-fab md-hue-2 md-primary" aria-label="Edit" style="margin:0px 10px 10px 0px">
                            <md-tooltip>Add Attachment</md-tooltip>
                            <md-icon md-font-library="material-icons">&#xE226;</md-icon>
                        </md-button>

                        <md-button class="md-fab md-hue-2 md-primary" aria-label="Edit" style="margin:0px 10px 10px 0px" ng-click="vm.EditDiagnosis()">
                            <md-tooltip>Edit Diagnosis</md-tooltip>
                            <md-icon md-font-library="material-icons">&#xE254;</md-icon>
                        </md-button>
                    </div>
                </md-card-actions>
            </md-card>
        </div>

        <!--<div layout="column" flex-gt-sm="45" flex="100">
            <md-card class="md-whiteframe-9dp patientCard noBorder">
                <md-toolbar class="md-hue-2 md-primary">
                    <h3>Referral Attachments</h3>
                </md-toolbar>

                <md-card-content layout-gt-xs="row" layout="column" layout-align="space-around stretch">
                    <div layout="column" layout-align="space-around stretch">
                        <div layout="row" layout-align="start stretch">
                            <p class="cardcontentsubheading">Attachment Count:</p>
                            <p class="cardcontentvalue">2</p>
                        </div>
                    </div>
                </md-card-content>

                <md-card-actions layout="row" layout-align="end center">
                    <md-button class="md-fab md-hue-2 md-primary" aria-label="Edit" style="margin:0px 10px 10px 0px">
                        <md-tooltip>Edit Section</md-tooltip>
                        <md-icon md-font-library="material-icons">&#xE254;</md-icon>
                    </md-button>
                </md-card-actions>
            </md-card>
        </div>-->


        <div flex="100">
            <md-card class="md-whiteframe-9dp patientCard noBorder">
                <md-toolbar class="md-hue-2 md-primary">
                    <h3>Referral Details</h3>
                </md-toolbar>

                <md-card-content layout="column" layout-align="space-around stretch">
                    <div layout-gt-xs="row" layout="column" layout-align="start center" flex="100">
                        <p class="cardcontentsubheading">Physician Practice:</p>
                        <p class="cardcontentvalue">This is a very long practice name</p>
                    </div>
                    <div layout-gt-xs="row" layout="column" layout-align="start center" flex="100">
                        <p class="cardcontentsubheading">Referred From:</p>
                        <p class="cardcontentvalue">Dr. LongFirstName LongLastName</p>
                    </div>
                    <div layout-gt-xs="row" layout="column" layout-align="start center" flex="100">
                        <p class="cardcontentsubheading">Physician Fax:</p>
                        <p class="cardcontentvalue">+1 (123)456-7890</p>
                    </div>
                    <div layout-gt-xs="row" layout="column" layout-align="start center" flex="100">
                        <p class="cardcontentsubheading">Physician Referral Email:</p>
                        <p class="cardcontentvalue">drlongnamelastname@physiciangroup.com</p>
                    </div>

                    <div layout-gt-xs="row" layout="column" layout-align="start center" flex="100">
                        <p class="cardcontentsubheading">Requested Practice:</p>
                        <p class="cardcontentvalue">This is a very long practice name</p>
                    </div>
                    <div layout-gt-xs="row" layout="column" layout-align="start center" flex="100">
                        <p class="cardcontentsubheading">Referred To:</p>
                        <p class="cardcontentvalue">Dr. LongFirstName LongLastName</p>
                    </div>
                    

                    <div layout="column" layout-align="start stretch" flex="100">
                        <p class="cardcontentsubheading">Reason For Referral:</p>
                        <p class="cardcontentvalue">This is a long sentence that will explain the reason for the referral. It can be more than 3 lines too. It does not matter how long it is.</p>
                    </div>

                    <div layout="column" layout-align="start stretch" flex="100">
                        <p class="cardcontentsubheading">Referral Notes:</p>
                        <p class="cardcontentvalue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porttitor magna id massa malesuada, ut eleifend velit elementum. Fusce sem risus, vulputate ac felis ut, sagittis venenatis elit. Suspendisse elementum faucibus hendrerit. Maecenas mauris urna, viverra in metus ut, luctus elementum lectus. Nullam nibh arcu, placerat id condimentum vitae, auctor quis massa. Vivamus a cursus leo. Praesent nec dolor lacus. Sed imperdiet metus quis metus accumsan mattis ut in sapien. Sed porttitor semper nulla sit amet vestibulum. </p>
                    </div>

                </md-card-content>

                <md-card-actions layout="row" layout-align="space-between center" >
                    
                    <md-button class="md-fab md-hue-2 md-hue-3" aria-label="Edit" style="margin:0px 10px 10px 10px" ng-click="vm.GoToTop()">
                        <md-tooltip>Go to top</md-tooltip>
                        <md-icon md-font-library="material-icons">&#xE5D8;</md-icon>
                    </md-button>

                    <md-button class="md-fab md-hue-2 md-primary" aria-label="Edit" style="margin:0px 10px 10px 0px" ng-click="vm.EditReferralDetails()">
                        <md-tooltip>Edit Section</md-tooltip>
                        <md-icon md-font-library="material-icons">&#xE254;</md-icon>
                    </md-button>
                </md-card-actions>
            </md-card>
        </div>


    </div>
</div>

<!--<div class="layout-fill" layout="column" layout-align="space-around stretch" layout-padding>
    <md-fab-speed-dial md-direction="right" class="md-fling md-fab-bottom-left" md-open="false">
        <md-fab-trigger>
            <md-button aria-label="menu" class="md-fab md-warn">
                <md-tooltip md-direction="top">Menu</md-tooltip>
                <md-icon md-svg-src="img/icons/menu.svg"></md-icon>
            </md-button>
        </md-fab-trigger>

        <md-fab-actions>
            <md-button aria-label="twitter" class="md-fab md-raised md-mini">
                <md-tooltip md-direction="left">Twitter</md-tooltip>
                <md-icon md-svg-src="img/icons/twitter.svg"></md-icon>
            </md-button>

            <md-button aria-label="facebook" class="md-fab md-raised md-mini">
                <md-tooltip md-direction="right">Facebook</md-tooltip>
                <md-icon md-svg-src="img/icons/facebook.svg"></md-icon>
            </md-button>

            <md-button aria-label="Google Hangout" class="md-fab md-raised md-mini">
                <md-tooltip md-direction="left">Google Hangout</md-tooltip>
                <md-icon md-svg-src="img/icons/hangout.svg"></md-icon>
            </md-button>
        </md-fab-actions>
    </md-fab-speed-dial>
</div>-->